<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/AQIData.js"></script>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var mychart = echarts.init(document.getElementById('chart'));
		mychart.setOption({
			title: {
				text: 'Beijing AQI'
			},
			legend: {},
			tooltip: {
				trigger: 'axis',
			},
			xAxis: {
				data: data.map(function (item) {
					return item[0];
				}),
			},
			yAxis: {
				splitLine: {
					show: false
				}
			},
			toolbox: {
				right: '10%',
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					restore: {},
					saveAsImage: {}
				}
			},
			dataZoom: [
				{
					type: 'inside',
					start: 0,
					end: 10
				},
				{
					type: 'slider',
					start: 0,
					end: 10,
				}
			],
			visualMap: {
				top: 10,
				right: 10,
				type: 'piecewise',
				pieces: [
					{
						gt: 0,
						lte: 50,
						color: '#096'
					},
					{
						gt: 50,
						lte: 100,
						color: '#ffde33'
					},
					{
						gt: 100,
						lte: 150,
						color: '#ff9933'
					},
					{
						gt: 150,
						lte: 200,
						color: '#cc0033'
					},
					{
						gt: 200,
						lte: 300,
						color: '#660099'
					},
					{
						gt: 300,
						color: '#7e0023'
					}
				],
				outOfRange: {
					color: '#999'
				}
			},
			series: {
				type: 'line',
				name: 'Beijing AQI',
				coordinateSystem: 'cartesian2d',

				data: data.map(function (item) {
					return item[1];
				}),

				symbol: 'emptyCircle',
				symbolSize: 10,
				//showSymbol :false,
				showAllSymbol: 'auto',
				hoverAnimation: true,
				legendHoverLink: false,
				cursor: 'crossHair',
				connectNulls: false,
				step: false,

				label: {
					show: true,
					position: 'right',
					distance: 10,
					//offset :[30,40]
				},
				itemStyle: {
					color: 'green',
					borderColor: 'green',
				},
				lineStyle: {
					//color:'pink',
					width: 0,
				},
				areaStyle: {

				},
				emphasis: {
					label: {
						fontSize: 20,
					},
					itemStyle: {
						borderColor: 'brown',
						borderWidth: 3,
					}
				},
				smooth: true,
				//smoothMonotone :'none',

				markPoint: {
					data: [
						{
							type: 'max',
							coord: [10, 100],
							coord: ['2000-06-14', 100],
							x: 100,
							y: 100,
							value: 'k',
							symbol: 'pin'
						},
						{
							coord: ['2001-03-06', 338],
							value: 338,
							label: {
								color: 'yellow',
							},
							itemStyle: {
								color: 'green',
							},
							emphasis: {
								label: {
									color: '#fff',
								},
								itemStyle: {
									color: 'teal',
								},
							}
						}
					],

					symbol: 'arrow',
					symbolSize: 50,
					label: {
						color: '#fff',
					},
					itemStyle: {
						color: 'blue',
					},
					emphasis: {
						label: {
							color: '#000',
						},
						itemStyle: {
							color: 'teal',
						},
					}
				},


				markLine :{
					data :[
						[
							{
								//起点坐标
								name:'通过 x, y 属性指定起点坐标',
								x:50,
								y:50,

								symbol :'roundRect',
								symbolSize :20,
								lineStyle:{
									color:'red',
								},
								label:{
									show:true,
									position:'middle'
								}
								
							},
							{
								//终点坐标
								x:400,
								y:400,
							}
						],
						[
							{
								name:'通过coord属性指定起点与终点的坐标',
								coord:[10,20]
							},
							{
								coord:[480,490]
							}
						],
						{
							name:'通过最大值与最小值来指定标记线',
							type:'average',
						},
						{
							name:'通过x、y轴来直接指定标记线',
							xAxis:100,
						}
					]
				},


				markArea :{
					data:[
						[
							{
								name:'y轴300-400的范围',
								yAxis:300
							},
							{
								yAxis:400
							}
						],
						[
							{
								name:'两个坐标点之间的标注区域',
								coord:[10,450],
								itemStyle:{
									color:'pink',
								}
							},
							{
								coord:[100,470]
							}
						]
					]
				}
			}
		});
	</script>
</body>

</html>
